<template>
	<view>
		<uv-navbar title="切换语言" bg-color="#FFFFFF" :placeholder='true' leftIconSize="20px"
			leftIconColor="#313C56" :autoBack='true' titleStyle="font-size: 16px;font-weight: 800;color: #313c56;" />
		<view class="flex-column font-14 font-weight-regular" style="margin-top: 10px; color: #313C56;">
			<view v-for="(item,index) in list" :key="index" class="flex-row flex-items-center flex-between"
            style="margin-left: 16px; margin-right: 16px; height: 46px; border-bottom: 1px solid #EFF0F4;" @click="checkLan(item.language, item.languageNative, item.country)">
				<text>{{ item.country }} ({{item.languageNative}})</text>
				<image v-if="lan == item.language" src="../../static/select-bold.png" style="width: 24px; height: 24px;"></image>
			</view>
		</view>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	import {getCountry} from "../../api";

  export default {
		data() {
			return {
        lan:'',
				list: []
			}
		},
		computed: {
			statusBarHeight() {
				const sys = uni.$uv.sys()
				return sys.statusBarHeight
			},
			navbarHeight() {
				return this.statusBarHeight + 44
			},
			screenWidth() {
				const sys = uni.$uv.sys()
				return sys.windowWidth
			},
			pageHeight() {
				const sys = uni.$uv.sys()
				return sys.windowHeight - this.navbarHeight
			},
			scrollHeight() {
				return this.pageHeight - this.toolbarHeight - 15
			},
			toolbarHeight() {
				const sys = uni.$uv.sys()
				return sys.safeAreaInsets.bottom + 68
			}
		},
    mounted() {
      this.lan = this.$cookie.getLanguage();
      this.getCountry()
    },
		methods: {
      getCountry() {
        getCountry().then((data) => {
          if(data){
            console.error(data)
            this.list = data
          }
        }).catch((res) => {})
      },

      checkLan(language, name, county) {
        this.$cookie.setCounty(county)
        this.$cookie.setLanguage(language)
        this.$cookie.setLan(name)
        this.lan = language
        uni.navigateTo({
          url: '/pages/setting/setting'
        })
      }
		},

	}
</script>

<style>
	page {
		background-color: white;
	}
</style>
